<template>
	<view class="content">
		<view class="header">
			<image src="../../static/首页.png"></image>
		</view>
		<view class="num">
			<text  class="font2"  decode="true">有 &nbsp;
			 <text class="fontNum">\t 20 \t  </text>本书籍\n</text>
		</view>
		<view class="headFlow">
		  <!-- 代码 -->
		  <image class="bg_ware" src="https://moyv.top/wechat/images/bg_wave.gif"></image>
		</view>
		<bookItem v-for="(item,index) in book " :item="item" :key="index"></bookItem>
	</view>
</template>

<script>
	import bookItem from "components/bookItem.vue" 
	export default {
		data() {
			return {
				bookNum: '',
				title: 'Hello',
				scanBook: {},
				BookIsbn: Number,
				book: [
					{
						title: '《挪威的森林》',
						author: '村上春树',
						img: '',
						text: '故事讲述主角纠缠在情绪不稳定且患有精神疾病的直子和开朗活泼的小林绿子之间，展开了自我成长的旅程。自该书在日本问世，截止2012年在日本共销出1500余万册。'
					},
					{
						title: '《窗边的小豆豆》',
						author: '黑柳彻子',
						img: '',
						text: '讲述了作者上小学时的一段真实的故事。作者因淘气被原学校退学后，来到巴学园。在小林校长的爱护和引导下，让一般人眼里“怪怪”的小豆豆逐渐成了一个大家都能接受的孩子，并奠定了她一生的基础。这本书不仅带给世界几千万读者无数的笑声和感动，而且为现代教育的发展注入了新的活力'
					},
					{
						title: '《房思琪的初恋乐园》',
						author: '林奕含',
						img: '',
						text: '这是一个令人心碎却无能为力的故事痛苦的际遇是如此难以分享，好险这个世界还有文学。'
					},
				]
			}
		},
		components: {
			bookItem
		},
		 onLoad(options) {
			 var _that = this
			 uni.request({
			 	url: 'https://www.hl0203.com/book/getAll',
				method: 'post',
				 success: (res) => { 
				        console.log(res.data);
						_that.bookNum = res.data.data.length
						console.log(res.data);
						_that.book = res.data.data
						console.log(_that.book)
				}
			 }) 
		},  
		methods: {
			test() {
				uni.showLoading({
				    title: '识别中...'
				});
				uni.request({
				    url: 'http://route.showapi.com/1626-1', //仅为示例，并非真实接口地址。
				    data: {
				        "showapi_timestamp": formatterDateTime(),
				        "showapi_appid": '622437', //这里需要改成自己的appid
				        "showapi_sign": '0289e087c21349ff9f87776bd580a0a8',  //这里需要改成自己的应用的密钥secret
				        "isbn":this.BookIsbn
				    },
				    header: {
				        'custom-header': 'hello', //自定义请求头信息
						'content-type': 'application/json'
				    },
				    success: (res) => {
						this.scanBook = res.data.showapi_res_body.data
				        console.log(this.scanBook);
				        this.text = 'request success';
						wx.navigateTo({
							url:'/pages/submitBook/submitBook?scanBook='+ JSON.stringify(this.scanBook)
						})
						uni.hideLoading()
				    },
					fail() {
						console.log("fail")
					}
				});
				function formatterDateTime() {
				var date=new Date()
				var month=date.getMonth() + 1
				var datetime = date.getFullYear()
				+ ""// "年"
				+ (month >= 10 ? month : "0"+ month)
				+ ""// "月"
				+ (date.getDate() < 10 ? "0" + date.getDate() : date.getDate())
				+ ""
				+ (date.getHours() < 10 ? "0" + date.getHours() : date.getHours())
				+ ""
				+ (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes())
				+ ""
				+ (date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds());
				return datetime;
				}
			},
			// 扫码功能
			scan() {
				uni.scanCode({
				    success: res => {
						this.BookIsbn = res.result;
						this.test()
				    }
				});
			},
			// 调整到详情页面
			toDetail(index) {
				console.log(index)
			}
		}
	}
</script>

<style>
	.content{
		width: 100%;
		height: 100%;
		background-color: #F3F1FE;
	}

	.headFlow {
		width: 100%;	  
		position: relative;
		/* height:500rpx; */
		/* /* background: linear-gradient(to bottom,  #4F38A4, #9B3EEF); */ 
		/* height: 20px; */
		/* z-index: -10; */
	}
	.bg_ware {
	  position: absolute;
	  left: 0;
	  bottom: -2rpx;
	  width: 100%;
	  mix-blend-mode: screen;
	  height: 120rpx;
	}
	.font3 {
		font-size: 40rpx;
	}
	.header image{
		width: 100%;
		z-index: 100;
	}
	.num {
		position: absolute;
		top: 260rpx;
		left: 40rpx;
	}
	.font1, .font2, .font3, .fontNum{
		color: white;
		font-weight: bold;
	}
	.font2{
		font-size: 40rpx;
	}
	.fontNum{
		font-size: 60rpx;
	}
	.headimg1 image{
		width: 250rpx;
		height: 100rpx;
	}
	.headimg2 image{
		width: 280rpx;
		height: 80rpx;
	}
	.headimg2{
		width: 200rpx;
		
	}
</style>
